<div ng-init="vm.init()" class="x-blog">
  <div class="container x-blog-viewer" ng-show="vm.code != ''">
    <section class="x-markdown">
      <h1>{{vm.title}}</h1>
      <hr>
      <p markdown-to-html="vm.code"></p>
    </section>
    <aside class="x-header-list" ng-if="vm.headers.length > 0" ng-class="{'x-hover': vm.hover}"
        ng-mouseleave="vm.hover = false" ng-mouseover="vm.hover = true">
      <ul class="x-timeline" ng-init="vm.selected = vm.headers[0].id">
        <li></li>
        <li ng-repeat="header in vm.headers" class="{{'x-' + header.level}}"
            ng-class="{'x-active': vm.selected == header.id}">
          <i class="x-ball"></i>
          <div class="x-timeline-item">
            <h3 class="x-timeline-header"><a href="javascript:void(0)" ng-disabled="vm.selected == header.id"
                ng-click="vm.scrollTo(header.id, $index)">{{header.text}}</a></h3>
          </div>
        </li>
        <li></li>
      </ul>
    </aside>
  </div>
</div>
